<template>
  <div>
    <el-card class="box-card">
      <!-- 添加用户 -->
      <el-row :gutter="20">
        <el-col :span="10">
          <el-input placeholder="请输入内容" v-model="list.query" clearable>
            <el-button slot="append" icon="el-icon-search" @click="usersList"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="changeClick">添加用户</el-button>
        </el-col>
      </el-row>
      <!-- 表格部分 -->
      <el-table :data="users" style="width: 100% ; margin:20px 0" :Boolean="true" border>
        <el-table-column type="index"></el-table-column>
        <el-table-column prop="username" label="姓名"></el-table-column>
        <el-table-column prop="email" label="邮箱"></el-table-column>
        <el-table-column prop="mobile" label="电话"></el-table-column>
        <el-table-column prop="role_name" label="角色"></el-table-column>
        <el-table-column prop="mg_state" label="状态">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.mg_state" @change="userChange(scope.row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="mg_state" label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              @click="openAlterUser(scope.row.id)"
            ></el-button>
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="open(scope.row.id)"></el-button>
            <el-tooltip content="分配角色" placement="top" :enterable="false" >
              <el-button type="warning" icon="el-icon-setting" size="mini" @click="userFpClick(scope.row)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="usersSizeChange"
        @current-change="usersCurrentChange"
        :current-page="list.pagenum"
        :page-sizes="[2, 5, 7, 10]"
        :page-size="list.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-card>

    <home-add-user @addUserSuccess="addUserSuccess" />

    <alter-user :alterList="alterList" @alterUser="alterUser" />

    <users-fp :usersfpList="usersfpList" :rolesList="rolesList" @setRoles="setRoles"/>
  </div>
</template>
<script>
import HomeAddUser from "./HomeAddUser";
import AlterUser from "./AlterUser";
import UsersFp from './UsersFp'

import { homeUser, userChange, getUserData,deleteUser } from "network/homelist";

export default {
  data() {
    return {
      list: {
        query: "",
        pagenum: 1,
        pagesize: 2
      },
      users: [],
      total: null,
      alterList: {},
      usersfpList : {},
      rolesList : []
    };
  },
  methods: {
    //   发起网络请求
    usersList() {
      return homeUser(this.list)
        .then(res => {
          // console.log(res)
          this.users = res.data.data.users;
          this.total = res.data.data.total;
          // console.log(this.total)
        })
        .catch(err => {
          this.$Message.error(err.data.meta.msg);
        });
    },

    usersSizeChange(num) {
      //   console.log(index)
      this.list.pagesize = num;
      this.usersList();
    },
    usersCurrentChange(pages) {
      this.list.pagenum = pages;
      this.usersList();
    },

    // 更新用户状态
    userChange(userInfo) {
      userChange(`/users/${userInfo.id}/state/${userInfo.mg_state}`).then(
        res => {
          // console.log(res)
          if (res.data.meta.status !== 200) {
            this.$Message.error(res.data.meta.msg);
          } else {
            this.$Message.success(res.data.meta.msg);
          }
        }
      );
    },

    // 修改子组件
    // userClick(){
    //   this.isShow = false
    // },
    // userShowClick(){
    //   this.isShow = !this.isShow
    // }
    changeClick() {
      this.$store.commit("openUser");
    },

    openAlterUser(id) {
      this.$store.commit("openAlterUser");
      getUserData("/users/" + id).then(res => {
        console.log(res);
        if (res.data.meta.status !== 200)
          return this.$Message.error("用户信息获取失败！");
        this.alterList = res.data.data;
        console.log(this.alterList);
      });
    },

    addUserSuccess() {
      this.usersList();
      this.$store.commit("closeUser");
      this.$Message.success("添加用户成功！");
    },

    alterUser() {
      this.usersList();
      this.$store.commit("closeAlterUser");
      this.$Message.success("更新成功！");
    },

    // 删除弹窗
    async open(id) {
      const isTrue =await this.$confirm("此操作将永久删除该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning", 
      }).catch(err => err)
      console.log(isTrue)
      if(isTrue === 'confirm'){
        deleteUser("/users/" + id).then(res => {
          console.log(res)
          if(res.data.meta.status === 200){
            this.usersList()
            this.$Message.success(res.data.meta.msg)
            
          }else{
            this.$Message.error(res.data.meta.msg)
          }
        })
      }else{
        this.$Message.info("取消删除！")
      }
    },

    userFpClick(data){
      this.$store.commit('openUserShow')
      this.usersfpList = data
      getUserData('/roles').then(res => {
        if(res.data.meta.status !== 200){
          this.$Message.error("角色信息获取失败！")
        }
        this.rolesList = res.data.data
        // console.log(this.rolesList)
      })

    },
    setRoles(res){
      this.usersList()
      this.$store.commit("closeUserShow")
      this.$Message.success(res.data.meta.msg)
    }
  },
  components: {
    HomeAddUser,
    AlterUser,
    UsersFp
  },
  created() {
    this.usersList();
  }
};
</script>
<style lang="less" scoped>
.box-card {
  margin-top: 20px;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.15);
}
</style>
